<template>
	<view class="product-detail">
		<!-- 商品图片 -->
		<image :src="product.image" class="product-image" />

		<!-- 商品信息 -->
		<view class="product-info">
			<view class="product-title">{{ product.goodsName }}</view>
			<view class="product-money">¥{{ product.money }}</view>
			<!-- <view class="product-inventory">库存: {{ product.inventory }}</view> -->
			<view class="product-sales">销量: {{ product.sales }}</view>
			<view class="product-grade">等级: {{ gradeText(product.grade) }}</view>
			<view class="product-details">{{ product.details }}</view>
		</view>

		<!-- 加入购物车按钮 -->
		<button class="add-to-cart-button" @click="addToCart(product)">加入购物车</button>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				product: {
					id: Number,
					goodsName: '',
					money: '',
					image: '',
					grade: '',
					details: '',
					inventory: '',
					sales: ''
				}
			};
		},
		onLoad(options) {
			const {
				id,
				goodsName,
				money,
				image,
				grade,
				details,
				inventory,
				sales
			} = options;
			this.product = {
				id: parseInt(id),
				goodsName: decodeURIComponent(goodsName),
				money,
				image: decodeURIComponent(image),
				grade: grade,
				details: decodeURIComponent(details),
				inventory,
				sales
			};
		},
		methods: {
			gradeText(grade) {
				switch (grade) {
					case '1':
						return '甄选';
					case '2':
						return '优选';
					case '3':
						return '一级品';
					case '4':
						return '二级品';
					case '5':
						return '三级品';
					default:
						return '未知等级';
				}
			},
			addToCart(item) {
				//  console.log(`${item.goodsName} 已加入购物车`);
				// 获取当前购物车中的商品
				let cartItems = uni.getStorageSync('cartItems') || [];
				// 检查购物车中是否已有该商品
				let existItem = cartItems.find(cartItem => cartItem.id === item.id);

				if (existItem) {
					// 如果商品已存在，则增加数量
					existItem.quantity += 1;
				} else {
					// 如果商品不存在，则添加到购物车数组中
					item.quantity = 1; // 初始化数量
					cartItems.push(item);
				}

				// 更新购物车中的商品数据到本地存储
				uni.setStorageSync('cartItems', cartItems);
				//  console.log("cartItems", cartItems);

				uni.showToast({
					title: `加入成功`,
					icon: 'success'
				});
			}
		}
	};
</script>
<style scoped>
	.product-detail {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		height: 100vh;
		padding: 16px 16px 40px 16px;
		background-color: #f5f5f5;
	}

	.product-image {
		width: 100%;
		height: 50vh;
		border-radius: 12px;
		margin-bottom: 16px;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	}

	.product-info {
		flex: 1;
		background-color: #fff;
		padding: 16px;
		border-radius: 12px;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
		margin-bottom: 20px;
	}

	.product-title {
		font-size: 22px;
		font-weight: 600;
		color: #333;
		margin-bottom: 8px;
	}

	.product-money {
		font-size: 20px;
		color: #04BE02;
		margin-bottom: 8px;
		font-weight: 500;
	}

	.product-inventory,
	.product-sales,
	.product-grade,
	.product-details {
		font-size: 16px;
		color: #666;
		margin-bottom: 8px;
	}

	.add-to-cart-button {
		position: fixed;
		bottom: 0;
		width: 100%;
		left: 0;
		/* padding: 14px 0; */
		background-color: #04BE02;
		color: #fff;
		font-size: 18px;
		font-weight: 500;
		text-align: center;
		border: none;
		/* border-radius: 8px; */
		box-shadow: 0 4px 12px rgba(255, 77, 79, 0.5);
		transition: background-color 0.3s ease;
	}

	.add-to-cart-button:hover {
		background-color: #ff7875;
	}
</style>